﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>View Product | A - Mark Admin</title>
    <link rel="stylesheet" type="text/css" href="Css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="Css/text.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="Css/grid.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="Css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="Css/nav.css" media="screen" />
    <link href="Css/gallery.css" rel="stylesheet" type="text/css" />
    <link href="Css/facebox.css" rel="stylesheet" type="text/css" />
    <link href="Css/tabs.css" rel="stylesheet" type="text/css" />
    <link href="Css/prettyPhoto.css" rel="stylesheet" type="text/css" />
    <link href="Css/table/demo_page.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="Css/ie6.css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="Css/ie.css" media="screen" /><![endif]-->
    <link href="Css/fancy-button/fancy-button.css" rel="stylesheet" type="text/css" />
    <!--Jquery UI CSS-->
    <!-- BEGIN: load jquery -->
    <script src="../Js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="Js/jquery-ui/jquery.ui.core.min.js"></script>
    <script src="Js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.mouse.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.sortable.min.js" type="text/javascript"></script>
    <script src="Js/table/jquery.dataTables.min.js" type="text/javascript"></script>
    <!-- END: load jquery -->
    <!-- BEGIN: load jqplot -->
    <link rel="stylesheet" type="text/css" href="Css/jquery.jqplot.min.css" />
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="Js/jqPlot/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="Js/jqPlot/jquery.jqplot.min.js"></script>
    <script language="javascript" type="text/javascript" src="Js/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="Js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="Js/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="Js/jqPlot/plugins/jqplot.highlighter.min.js"></script>
    <script language="javascript" type="text/javascript" src="Js/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="Js/jqPlot/plugins/jqplot.donutRenderer.min.js"></script>
    <script type="text/javascript" src="Js/jqPlot/plugins/jqplot.bubbleRenderer.min.js"></script>
    <script type="text/javascript" src="Js/jqPlot/plugins/jqplot.donutRenderer.min.js"></script>
    <script type="text/javascript" src="Js/jqPlot/plugins/jqplot.bubbleRenderer.min.js"></script>
    <!-- END: load jqplot -->
    <script src="Js/setup.js" type="text/javascript"></script>
    <script type="text/javascript" src="Js/table/table.js"></script>
    <!--jQuery Date Picker-->
    <script src="Js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.datepicker.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.progressbar.min.js" type="text/javascript"></script>
    <!-- jQuery dialog related-->
    <script src="Js/jquery-ui/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.mouse.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.draggable.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.position.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.resizable.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.ui.dialog.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.effects.blind.min.js" type="text/javascript"></script>
    <script src="Js/jquery-ui/jquery.effects.explode.min.js" type="text/javascript"></script>
    <!-- jQuery dialog end here-->
    <script src="Js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
    <!--Fancy Button-->
    <script src="Js/fancy-button/fancy-button.js" type="text/javascript"></script>
    <script src="Js/setup.js" type="text/javascript"></script>
    <!-- Load TinyMCE -->
    <script src="Js/tiny-mce/jquery.tinymce.js" type="text/javascript"></script>
    <script src="Js/popup/jquery.facebox.js" type="text/javascript"></script>
    <script src="Js/quick-sand/jquery.quicksand.js" type="text/javascript"></script>
    <script src="Js/pretty-photo/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            setupLeftMenu();
            setSidebarHeight();
            setupTinyMCE();
            setupProgressbar('progress-bar');
            setDatePicker('date-picker');
            setupDialogBox('dialog', 'opener');
            $('input[type="checkbox"]').fancybutton();
            $('input[type="radio"]').fancybutton();
        });
    </script>
    <!-- /TinyMCE -->

    <link rel="stylesheet" type="text/css" href="Css/style.css" />
    <link rel="stylesheet" type="text/css" href="Css/jscrollpane.css" />
    <script type="text/javascript" src="Js/jquery.jscrollpane.min.js"></script>
    <!-- jscoll pane -->
    <script type="text/javascript">
        $(function () {

            // the element we want to apply the jScrollPane
            var $el = $('#jp-container').jScrollPane({
                verticalGutter: -16
            }),

            // the extension functions and options 	
                extensionPlugin = {

                    extPluginOpts: {
                        // speed for the fadeOut animation
                        mouseLeaveFadeSpeed: 500,
                        // scrollbar fades out after hovertimeout_t milliseconds
                        hovertimeout_t: 1000,
                        // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
                        // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
                        // also, it will be shown when we start to scroll and hidden when stopping
                        useTimeout: true,
                        // the extension only applies for devices with width > deviceWidth
                        deviceWidth: 980
                    },
                    hovertimeout: null, // timeout to hide the scrollbar
                    isScrollbarHover: false,// true if the mouse is over the scrollbar
                    elementtimeout: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
                    isScrolling: false,// true if scrolling
                    addHoverFunc: function () {

                        // run only if the window has a width bigger than deviceWidth
                        if ($(window).width() <= this.extPluginOpts.deviceWidth) return false;

                        var instance = this;

                        // functions to show / hide the scrollbar
                        $.fn.jspmouseenter = $.fn.show;
                        $.fn.jspmouseleave = $.fn.fadeOut;

                        // hide the jScrollPane vertical bar
                        var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();

                        /*
                         * mouseenter / mouseleave events on the main element
                         * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
                         */
                        $el.bind('mouseenter.jsp', function () {

                            // show the scrollbar
                            $vBar.stop(true, true).jspmouseenter();

                            if (!instance.extPluginOpts.useTimeout) return false;

                            // hide the scrollbar after hovertimeout_t ms
                            clearTimeout(instance.hovertimeout);
                            instance.hovertimeout = setTimeout(function () {
                                // if scrolling at the moment don't hide it
                                if (!instance.isScrolling)
                                    $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                            }, instance.extPluginOpts.hovertimeout_t);


                        }).bind('mouseleave.jsp', function () {

                            // hide the scrollbar
                            if (!instance.extPluginOpts.useTimeout)
                                $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                            else {
                                clearTimeout(instance.elementtimeout);
                                if (!instance.isScrolling)
                                    $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                            }

                        });

                        if (this.extPluginOpts.useTimeout) {

                            $el.bind('scrollstart.jsp', function () {

                                // when scrolling show the scrollbar
                                clearTimeout(instance.hovertimeout);
                                instance.isScrolling = true;
                                $vBar.stop(true, true).jspmouseenter();

                            }).bind('scrollstop.jsp', function () {

                                // when stop scrolling hide the scrollbar (if not hovering it at the moment)
                                clearTimeout(instance.hovertimeout);
                                instance.isScrolling = false;
                                instance.hovertimeout = setTimeout(function () {
                                    if (!instance.isScrollbarHover)
                                        $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                                }, instance.extPluginOpts.hovertimeout_t);

                            });

                            // wrap the scrollbar
                            // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
                            var $vBarWrapper = $('<div/>').css({
                                position: 'absolute',
                                left: $vBar.css('left'),
                                top: $vBar.css('top'),
                                right: $vBar.css('right'),
                                bottom: $vBar.css('bottom'),
                                width: $vBar.width(),
                                height: $vBar.height()
                            }).bind('mouseenter.jsp', function () {

                                clearTimeout(instance.hovertimeout);
                                clearTimeout(instance.elementtimeout);

                                instance.isScrollbarHover = true;

                                // show the scrollbar after 100 ms.
                                // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar								
                                instance.elementtimeout = setTimeout(function () {
                                    $vBar.stop(true, true).jspmouseenter();
                                }, 100);

                            }).bind('mouseleave.jsp', function () {

                                // hide the scrollbar after hovertimeout_t
                                clearTimeout(instance.hovertimeout);
                                instance.isScrollbarHover = false;
                                instance.hovertimeout = setTimeout(function () {
                                    // if scrolling at the moment don't hide it
                                    if (!instance.isScrolling)
                                        $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                                }, instance.extPluginOpts.hovertimeout_t);

                            });

                            $vBar.wrap($vBarWrapper);

                        }

                    }

                },

                // the jScrollPane instance
                jspapi = $el.data('jsp');

            // extend the jScollPane by merging	
            $.extend(true, jspapi, extensionPlugin);
            jspapi.addHoverFunc();

        });
    </script>
    <!-- /jscoll pane-->
</head>
<body>
    <div class="container_12">
        <div class="grid_12 header-repeat">
            <div id="branding">
                <div class="floatleft">
                    <img src="Icons/logo.png" alt="Logo" />
                </div>
                <div class="floatright">
                    <div class="floatleft">
                        <img src="Icons/img-profile.jpg" alt="Profile Pic" />
                    </div>
                    <div class="floatleft marginleft10">
                        <ul class="inline-ul floatleft">
                            <li>Hello Admin</li>
                            <li><a href="#">Config</a></li>
                            <li><a href="login.html">Logout</a></li>
                        </ul>
                        <br />
                        <span class="small grey">Last Login: 3 hours ago</span>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <div class="grid_12">
            <ul class="nav main">
                <li class="ic-dashboard"><a href="index.html"><span>Trang chính</span></a>
                    <ul>
                        <li><a href="../home.html" target="_blank">Người dùng</a></li>
                        <li><a href="index.html">Quản trị</a> </li>
                    </ul>
                </li>
                <li class="ic-form-style"><a href="javascript:"><span>Controls</span></a>
                    <ul>
                        <li><a href="form-controls.html">Forms</a> </li>
                        <li><a href="buttons.html">Buttons</a> </li>
                        <li><a href="form-controls.html">Full Page Example</a> </li>
                        <li><a href="table.html">Page with Sidebar Example</a> </li>
                    </ul>
                </li>
                <li class="ic-typography"><a href="typography.html"><span>Typography</span></a></li>
                <li class="ic-charts"><a href="charts.html"><span>Charts & Graphs</span></a></li>
                <li class="ic-grid-tables"><a href="table.html"><span>Data Table</span></a></li>
                <li class="ic-gallery dd"><a href="javascript:"><span>Image Galleries</span></a>
                    <ul>
                        <li><a href="image-gallery.html">Pretty Photo</a> </li>
                        <li><a href="gallery-with-filter.html">Gallery with Filter</a> </li>
                    </ul>
                </li>
                <li class="ic-notifications"><a href="notifications.html"><span>Notifications</span></a></li>

            </ul>
        </div>
        <div class="clear">
        </div>
        <div class="grid_2">
            <div class="box sidemenu first">
                <div class="block" id="section-menu">
                    <ul class="section menu">
                        <li><a class="menuitem">Quản lý tài khoản</a>
                            <ul class="submenu">
                                <li><a href="addNewAccount.html">Thêm tài khoản</a> </li>
                                <li><a href="viewProfile.html">Thông tin tài khoản</a> </li>
                                <li><a href="listAccount.html">Danh sách tài khoản</a> </li>
                            </ul>
                        </li>
                        <li><a class="menuitem">Quản lý sản phẩm</a>
                            <ul class="submenu">
                                <li><a href="addNewProduct.html">Thêm sản phẩm</a> </li>
                                <li><a href="listProduct.html">Danh sách sản phẩm</a> </li>
                            </ul>
                        </li>
                        <li><a class="menuitem">Quản lý thể loại</a>
                            <ul class="submenu">
                                <li><a href="addNewCategory.html">Thêm thể loại</a> </li>
                                <li><a href="listCategory.html">Dách sách thể loại</a> </li>
                            </ul>
                        </li>
                        <li><a class="menuitem">Quản lý hóa đơn</a>
                            <ul class="submenu">
                                <li><a>Danh sách hóa đơn</a> </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="grid_10">
            <div id="view-product">
                <div class="box round first">
                    <h3>
                        <span style="float: left;">Thông tin cá nhân</span>
                        <span style="float: right; width: 300px; text-align: right;">
                            <a id="edit" href="javascript: void(0);">Chỉnh sửa</a> / 
                            <a href="javascript: void(0);">Xóa</a>
                        </span>
                    </h3>
                    <div class="clear"></div>
                    <div class="block" style="margin-left: 50px; overflow: hidden;">
                        <div class="floatleft" style="width: 640px;">
                            <form>
                                <table class="form">
                                    <tr>
                                        <td class="col1">
                                            <label>
                                                Tài khoản</label>
                                        </td>
                                        <td class="col2">admin</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Email</label>
                                        </td>
                                        <td>a-mark@sunnytech.com</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Họ và tên</label>
                                        </td>
                                        <td>Administrator</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Số điện thoại</label>
                                        </td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: middle;">
                                            <label>
                                                Địa chỉ</label>
                                        </td>
                                        <td>Tp.Hà Nội</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Phân quyền</label>
                                        </td>
                                        <td>Admin</td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                        <div class="floatright">
                            <img class="floatright-img" src="../Images/Image-User/422542_322705507777175_866381391_n.jpg" style="margin: 0px 180px 0px 0px;" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div id="edit-product" class="hidden">
                <div class="box round first">
                    <h3>
                        <span style="float: left;">Chỉnh sửa thông tin cá nhân</span>
                    </h3>
                    <div class="block" style="margin-left: 50px; overflow: hidden;">
                        <div class="floatleft" style="width: 640px;">
                            <form>
                                <table class="form">
                                    <tr>
                                        <td class="col1">
                                            <label>
                                                Tài khoản</label>
                                        </td>
                                        <td class="col2">
                                            <input type="text" placeholder="Tài khoản quản trị viên..." />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Email</label>
                                        </td>
                                        <td>
                                            <input type="text" style="width: 200px;" placeholder="Email quản trị viên..." />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Họ và tên</label>
                                        </td>
                                        <td>
                                            <input type="text" placeholder="Họ và tên quản trị viên..." />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Số điện thoại</label>
                                        </td>
                                        <td>
                                            <input type="text" style="width: 100px;" placeholder="Số điện thoại quản trị viên..." />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: middle;">
                                            <label>
                                                Địa chỉ</label>
                                        </td>
                                        <td>
                                            <textarea rows="5" style="width: 400px; vertical-align: middle;" placeholder="Địa chỉ quản trị viên..." ></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>
                                                Phân quyền</label>
                                        </td>
                                        <td>
                                            <select style="width: 100px;">
                                                <option>Admin</option>
                                                <option>Mod</option>
                                                <option>Sales</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <button class="btn btn-teal">Cập nhật</button>
                                            <a id="HuyBo" class="btn btn-red" href="javascript: void(0);">Hủy bỏ</a>
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                        <div class="floatright">
                            <img class="floatright-img" src="../Images/Image-User/422542_322705507777175_866381391_n.jpg" style="margin: 30px 180px 0px 0px;" alt="" /><br />
                            <input type="file" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="clear">
    </div>
    <div id="site_info">
        <p>
            Copyright <a href="#">A - Mark Admin</a>. All Rights Reserved.
        </p>
    </div>
</body>
</html>
